<template>
  <div>
    <!-- 添加 -->
    <el-form
      :inline="true"
      :model="role"
      class="demo-form-inline"
    >
      <el-form-item label="角色名称:">
        <el-input
          v-model="role.name"
          placeholder="添加名称"
        />
      </el-form-item>
      <el-form-item label="描述信息:">
        <el-input
          v-model="role.desc"
          placeholder="添加描述"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit($event)"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <!-- <div class="tableBox"> -->
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="name"
        label="角色名称"
      />
      <el-table-column
        prop="desc"
        label="说明"
      />
      <el-table-column
        prop=""
        label="操作"
      >
        <template #default="scope">
          <el-button
            size="small"
            @click="handleFlx(scope.row)"
          >修改</el-button>
          <el-button
            size="small"
            type="primary"
            @click="handleQuanXian(scope.$index, scope.row)"
          >授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改的弹框 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="修改信息"
    >
      <el-form
        :inline="true"
        :model="form"
      >
        <el-form-item label="角色名称:">
          <el-input
            style="width:180px"
            v-model="form.name"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="描述信息:">
          <el-input
            style="width:180px"
            v-model="form.desc"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="flxed"
          >修改</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 权限配置 -->
    <el-dialog
      v-model="dialogTreeVisible"
      title="权限配置"
    >
      <!-- 可选择的虚拟树形控件 -->
      <el-tree
        :data="treeData"
        :props="props"
        ref='tree'
        node-key="id"
        show-checkbox
        :height="208"
        :default-checked-keys="keysid"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTreeVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="treeHide"
          >确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- </div> -->
    <!-- //分页 -->
    <daily-demo
       v-bind="demo"
      @pages="pages"
      @limits="limits"
    ></daily-demo>
  </div>
</template>

<script>
import http from "@/util/http";
import DailyDemo from "@/components/DailyOperation/Demo.vue";

export default {
  components: {
    DailyDemo,
  },
  data() {
    return {
       demo: {
        page: 1,
        limit: 10,
        total: 10, //分页--总条数
      },
      form: { //修改的数据
        name: "",
        desc: "",
        id: "",
      },
      adminId: "", //点击当前数据的ID
      dialogFormVisible: false, //修改的弹框
      role: {
        //添加的数据
        name: "",
        desc: "",
      },
      tableData: [], //渲染列表数据
      dialogTreeVisible: false, //权限配置
      permList: {
        //权限参数列表
        _gp: "admin.role",
        _mt: "permissionList",
        roleId: "",
      },
      treeData: [],
      keysid: [], //当行数据默认选中的id
      props: {//
        value: "id",
        label: "label",
        children: "children",
      },
      roleDTO: {
        roleId: "",
        permissions: "",
      },
    };
  },
  created() {
    this.adminRole();
  },
  methods: {
    //分页---当前页数
    pages(e) {
      this.demo.page = e;
            this.adminRole();
    },
    // 分页---每页显示条目个数
    limits(e) {
      this.demo.limit = e;
            this.adminRole();
    },
    // 点击确定权限配置弹框影藏
    treeHide() {
      const rule_ids = this.$refs.tree.getCheckedKeys();
      const permissionSet = {
        //角色权限
        _gp: "admin.role",
        _mt: "permissionSet",
        roleSetPermissionDTO: JSON.stringify({
          roleId: this.permList.roleId,
          permissions: rule_ids,
        }),
      };
      http
        .post(permissionSet)
        .then((res) => {
          if (200 == res.data.errno) {
            ElMessage.success("权限配置成功")

            this.adminRole();
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogTreeVisible = false;
    },
    // 点击显示权限配置的弹框
    handleQuanXian(index, row) {
      this.keysid = []//选中列表清空
      this.permList.roleId = row.id;
      http
        .post(this.permList)
        .then((res) => {
          this.keysid = res.data.data.assignedPermissions;
          this.treeData = res.data.data.systemPermissions;
          this.adminRole();
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogTreeVisible = true;
    },
    // 弹框点击修改
    flxed() {
      const flixRole = {
        _gp: "admin.role",
        _mt: "update",
        role: JSON.stringify(this.form),
      };
      http
        .post(flixRole)
        .then((res) => {
         if (200 == res.data.errno) {
            ElMessage.success("修改成功")
            this.adminRole();
          }
        })
        .catch((err) => {
          console.log(err);
        });

      this.dialogFormVisible = false;
    },
    //点击修改
    handleFlx(row) {
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.desc = row.desc;
    },
    // 列表
    adminRole() {
     const data = {
        //列表请求
        _gp: "admin.role",
        _mt: "list",
        name: "",
         page: this.demo.page,
        limit: this.demo.limit,
      }
      http
        .post(data)
        .then((res) => {
          if (200 == res.data.errno) {
            this.tableData = res.data.data.items;
             this.demo.total = res.data.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onSubmit() {
      const formInlineS = {
        //添加请求
        _gp: "admin.role",
        _mt: "create",
        role: JSON.stringify(this.role),
      };
      //表单验证
      if (this.role.name != "" && this.role.desc != "") {
        http
          .post(formInlineS)
          .then((res) => {
           if (200 == res.data.errno) {
             ElMessage.success("添加成功")

            }
            this.adminRole();
            this.role.name = "";
            this.role.desc = "";
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
             ElMessage.error("输入框不能为空!")

      }
    }
  },
};
</script>
